<template>
<div id="p_record" class="p_task">
    <sticky scroll-box="vux_view_box_body" :offset="46">
      <div style="background-color:#f0f0f0;padding-top: 20px;">
          <div class="rprogress"><div class="rschedule"  v-bind:class="{ 'recordRun': mp3State== 0 }"></div></div>
            <div class="rtime">{{ durationWX ||"00:00:00"}}</div>

            <button-tab v-model="mp3State" style="padding-left:10%;padding-right:10%; padding-top:4px; padding-bottom:4px;">
                <button-tab-item @on-item-click="onStart" >录音</button-tab-item>
                <!-- <button-tab-item>暂停</button-tab-item> -->
                <button-tab-item @on-item-click="onStop">停止</button-tab-item>
                <button-tab-item  @on-item-click="onCancle">取消</button-tab-item>
            </button-tab>
        </div>
    </sticky> 
    <group>                
        <swipeout>
            <swipeout-item @on-open="actionOpen(item, index)" v-if="isInApp || item.url" v-for="(item, index) in audioArr" :key="index" ref="action" >
                <div slot="left-menu" v-if="isInApp">
                    <swipeout-button type="primary">上传</swipeout-button>
                </div>
                <div slot="right-menu">
                    <swipeout-button @click.native="onEditClick(item,index)" type="primary">改名</swipeout-button>
                    <swipeout-button @click.native="onDelClick(item,index)" type="warn">删除</swipeout-button>
                </div>
                <div slot="content" class="vux-1px-t">
                    <t-cell @click.native="onPlay(item,index)" :title="item.title" :value="item.duration" :tagTop="item.file?(item.url?{exts:['APP']}:{exts:['APP','未上传']}):null" :inline-desc="item.desc || (item.start +' ~ ' +item.end)">
                        <img slot="icon" :src="item.img || recordImg ">
                    </t-cell>
                </div>
            </swipeout-item>
        </swipeout>
    </group>
    <div  class="mp3player d_record" v-transfer-dom>
        <popup v-model="playerShow" position="bottom">
            <!-- <a-player  ref="player"  theme="#10aeff" mutex :showlrc="0" mode="circulation"  listmaxheight="260px" :music="mp3s"></a-player> -->
            <div class="videoContainer">
                <audio class="myVideo" controls preload="auto" poster="css/vp_poster.jpg" width="380">
                      <source type="audio/mp3">
                      <source type="audio/wav">
                      <source type="audio/ogg">
                    <p>Your browser does not support the video tag.</p>
                </audio>
                <div class="caption">灵感笔记录音</div>
                <div class="control">
                    <div class="btmControl">
                        <div class="btnPlay btn" title="Play/Pause video"><span class="icon-play"></span></div>
                        <div class="progress-bar">
                            <div class="progress">
                                <span class="bufferBar"></span>
                                <span class="timeBar"></span>
                            </div>
                        </div>
                        <div class="sound sound2 btn" title="Mute/Unmute sound"><span class="icon-sound"></span></div>
                        <div class="btnFS btn" title="Switch to full screen"><span class="icon-fullscreen"></span></div>
                    </div>
                </div>
            </div>
        </popup>
    </div>
    <div v-transfer-dom>
        <popup v-model="editTitleShow" position="bottom">                
            <divider>修改名称</divider>                                
            <x-input v-model="mp3title" required title="音频名称:"></x-input>
            <box  gap="10px 10px">
                <flexbox>
                    <flexbox-item>
                      <x-button type="primary" @click.native="doTitleChange">确定</x-button>
                    </flexbox-item>
                    <flexbox-item>
                      <x-button type="warn" @click.native="editTitleShow=false">取消</x-button>
                    </flexbox-item>
                </flexbox>
            </box>
        </popup>
    </div>
</div>
</template>
<script>
import moment from "moment";
import { sound  } from "../mixinSound";

import TCell from "../t-cell/index.vue"

import mp3player from "../../../static/z39h5/js/mp3player.js";

//import dataDefault from "../../data/taskDefault";

import Vue from 'vue'
import api from '../../api';
import {
    mapState,
    mapActions
} from 'vuex'

import {
    Toast,Swipeout,SwipeoutItem,SwipeoutButton,XButton,Group,Cell,Tab,TabItem,Sticky,Popup,Divider,
    Box,XInput,Flexbox, FlexboxItem,ButtonTab,ButtonTabItem,TransferDomDirective as TransferDom
} from 'vux'

export default {
    name: 'timetaskrecord',
    directives: {
        TransferDom
    },
    components: {
        TCell,
    Toast,Swipeout,SwipeoutItem,SwipeoutButton,XButton,Group,Cell,Tab,TabItem,Sticky,Popup,Divider,
    Box,XInput,Flexbox, FlexboxItem,ButtonTab,ButtonTabItem
    },
    mixins: [sound],    
    computed: {
        ...mapState({
            uid: state => state.vux.uid,
            mp3Arr: state => state.z39.mp3Arr,
            mp3Curr: state => state.z39.mp3Curr,
            mp3Update: state => state.z39.mp3Update 
        })
    },
    watch: {
        "playerShow":function(){
            if(!this.playerShow) mp3player.playpause(this.playType);
        },
        "uid":function(){
            this.initPage();
        },
    },
    activated () {
    },
    created() {
        try{ if(isApp)initDcloudAudio() }catch(e){ console.log("app not ready") };

        this.initPage();
        if(window.__wxjs_environment === 'miniprogram') try{getjssdk(true)}catch(e){}
    },
    mounted: function() {
        mp3player.initMp3();
        this.isInApp = isApp ;
    },
    methods: {
        initPage(){
            // if(this.hasInit)return ;
            //if( this.uid == 0)return this.audioArr = dataDefault.audios ;
            this.hasInit = true ;
            this.doAudiosGet() ;
            if(isApp){
                try{
                    update2vue();
                }catch(e){console.log("dcloud not ready")}
            }
        },
        doMerge(){
            if( this.audioArr.length == 0 || this.mp3Arr.length == 0 )return ;
            var dic = {} ;
            var len = this.mp3Arr.length ;
            for(var i=0;i<= len-1 ;i++){
                var item = this.mp3Arr[i] ;
                dic[item.file] = item.urllocal ;
            }
            len = this.audioArr.length ;
            for(var i=0;i<= len-1 ;i++){
                var item = this.audioArr[i] ;
                if( dic[item.file] != undefined){
                    item.urllocal = dic[item.file] ;
                }
            }
        },
        onEditClick(item, index){
            if(!this.uid) return this.$vux.toast.show({text:"请先登录",type: 'warn'});
            //修改标题名称.
            this.editTitleShow = true ;
            this.mp3EditCurr = item ;
            this.mp3title = item.title ;
        },
        doTitleChange(){
            if( this.mp3title.length == 0 ) return ;
            if( this.mp3title != this.mp3EditCurr.title ){
                api.audioSet({id:this.mp3EditCurr.id,title:this.mp3title});
                this.mp3EditCurr.title = this.mp3title ;
                this.editTitleShow = false ;
            }
        },
        actionOpen(item,index,option){            
            let dir = "" , target , arrIndex = index ;
            target = this.$refs.action[index] ;
                dir = target.direction ;
            if( dir == "left"){
                if( item.file && !item.url ){                    
                    try{
                        audioUpload(item);
                    }catch(e){console.log("dcloud not ready",e)} ;
                }else{
                    this.$vux.toast.show({
                        text: "文件已上传",
                        type: 'success'
                    })
                }
                setTimeout(() => {
                    target.close();
                }, 200);                
            }
        },
        getData: function() {
            
        },
        ...mapActions([
            
        ])
    },
    data() {
        return {
            isInApp:false, //保持isApp变量,用户v-if使用,怕使用isApp出错.
            playType:1, // 1 app插件播放 2、浏览器h5播放.
            hasInit:false ,
            durationWX:'',
            wxIntId:-1 ,
            actionWeekEndArr:[] ,
            audioArr: [] ,
            audioCurr:{} , //当前录音的文件信息
            startTime:0,
            playerShow:false ,
            mp3State: -1 ,
            mp3title:"",
            mp3EditCurr:null,
            editTitleShow:false,
            recordImg:'/static/z39h5/img/record.jpg',
            mp3s:[{
                    title: '测试!',
                    author: '作者本人',
                    url: 'http://devtest.qiniudn.com/secret base~.mp3',
                    pic: this.recordImg 
                }]
            
        }
    }
}
</script>
<style scoped>

.rtime {
    font-size: 22px;
    color: #10aeff ;
    text-align: center; 
}
.ptime {
    margin-top: 40%;
    font-size: 22px;
    color: #FFFFFF;
}
.rprogress {
        /*margin-top: 20px;*/
    background: url(../../../static/z39h5/img/arecord.png) no-repeat center center;
    background-size: 32px 32px;
}
.rschedule {
    background-color: rgba(0,0,0,0);
    border: 5px solid rgba(0,183,229,0.9);
    opacity: .9;
    border-left: 5px solid rgba(0,0,0,0);
    border-right: 5px solid rgba(0,0,0,0);
    border-radius: 50px;
    box-shadow: 0 0 15px #2187e7;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    transform: rotate(90deg);
}
.recordRun{
    -webkit-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.schedule {
  width: 8px;
  height: 8px;
  margin: 1px 0;
  background-color: #FFCC33;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: all 1s linear;
  transition: all 1s linear;
}


.day-item {
  border: 1px solid #ececec;
  padding: 5px 15px;
}
.day-item-selected {
  border: 1px solid green;
}

</style>
<style>

#p_record .weui-search-bar:before {
    height: 0;
    border-top: 0;
}
/*#p_record .vux-tab .vux-tab-item{
    background: #fff;
}*/
#p_record .day  .vux-tab-selected {
    background: #eee;
    border-radius: 4px;
}
</style>
